<template>
    <div>
        <!-- 导航栏 -->
        <van-nav-bar title="实训云平台" left-text="返回" right-text="首页" left-arrow @click-left="onClickLeft"
            @click-right="onClickRight" :placeholder="true" :fixed="true" />

        <div v-show="show == 0">
            <van-contact-card type="add" @click="onAdd" style="position:fixed;" />
            <div style="width:100%;height: 70px;"></div>
            <van-contact-card type="edit" v-for="( item, index) in list" :index="index" :name="item.name"
                :tel="item.counselorTelephone" :key="item.id" @click="onEdit(index)" />
            <div style="width:100%;height: 70px;"></div>

        </div>

        <div v-show="show == 1" style="margin: 10vh auto;">
            <van-form @submit="addClass">
                <van-field v-model="name" name="name" label="班级名称" placeholder="班级名称"
                    :rules="[{ required: true, message: '请填写班级名称' }]" />
                <van-field v-model="counselor" name="counselor" label="辅导员" placeholder="辅导员"
                    :rules="[{ required: true, message: '请填写辅导员' }]" />
                <van-field v-model="counselorTelephone" minlength="11" show-word-limit type="digit"
                    name="counselorTelephone" label="辅导员电话" placeholder="辅导员电话"
                    :rules="[{ required: true, message: '请输入正确11位电话' }]" />
                <van-field v-model="practiceTitle" name="practiceTitle" label="实训名称"
                    :rules="[{ required: true, message: '实训名称' }]" />
                <van-field v-model="practiceContent" name="practiceContent" label="实训内容"
                    :rules="[{ required: true, message: '实训内容' }]" />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">添加班级信息</van-button>
                </div>
            </van-form>
        </div>
        <div v-show="show == 2" style="margin: 10vh auto;">
            <van-form @submit="editClass">
                <van-field v-model="ename" name="ename" label="班级名称"
                    :rules="[{ required: true, message: '请填写班级名称' }]" />
                <van-field v-model="ecounselor" name="ecounselor" label="辅导员"
                    :rules="[{ required: true, message: '请填写辅导员' }]" />
                <van-field v-model="ecounselorTelephone" name="ecounselorTelephone" label="辅导员电话"
                    :rules="[{ required: true, message: '请填写辅导员电话' }]" />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>
            </van-form>
            <div style="margin: 16px;">
                <van-button round block type="danger" native-type="submit" @click="delClass">删除班级信息</van-button>
            </div>

        </div>

        <!-- 加载动画 -->
        <loading v-if="loadingStatus"></loading>
    </div>
</template>
<script>
import { Toast } from 'vant';
import req from '../../../request/request'
export default {
    name: 'ClassInfo',
    data() {
        return {
            counselorTelephone: "",
            counselor: "",
            name: "",

            ecounselorTelephone: "",
            ecounselor: "",
            ename: "",
            eid: "",
            show: 0,
            currentContact: {},
            list: [],
            practiceTitle:"",
            practiceContent:'',
            // 默认开启加载动画
            loadingStatus: true,
        };
    },
    methods: {
        // 加载切换
        goload() {
            this.loadingStatus = true;
            setTimeout(async () => {
                this.loadingStatus = false;
            }, 300);
        },
        // 删除信息
        delClass() {
            req({
                url: "delClass",
                method: "POST",
                data: {
                    id: this.list[this.eindex].id
                },
            }).then(res => {
                // console.log(res);
                //   判断成功之后
                Toast("删除成功！")
                }).catch(err => {
                // console.log(err)
            })
            this.back()
            this.goload();
        },

        // 修改信息
        editClass(value) {
            // console.log(value)
            req({
                url: "/editClass",
                method: "POST",
                data: {
                    id: this.list[this.eindex].id,
                    name: value.ename,
                    counselor: value.ecounselor,
                    counselorTelephone: value.ecounselorTelephone,
                }
            }).then(res => {
                this.getClassInfo();
                Toast("修改成功！")
            }).catch(err => {

            })
            this.back()
            this.goload();
        },

        // 返回方法
        back() {
            this.show = 0;
            this.getClassInfo();
            this.goload();
        },

        // 添加信息
        addClass(e) {
            e.relationTeacherId = this.$store.state.user.id;

            // console.log(e);
            req({
                url: "addClass",
                method: "POST",
                data: e,
            }).then(res => {
                // console.log(res);
                //   判断成功之后
                Toast("添加成功！")
                this.back();
                }).catch(err => {
                // console.log(err)
            })
        },
        // 获取信息
        getClassInfo() {
            req({
                url: "getClassInfo",
                method: "POST",
                data: {
                    id: this.$store.state.user.id
                }
            }).then(res => {
                if (res.data.code == 0) {
                    this.list = res.data.data;
                }
            }).catch(err => {
                // console.log(err)
            })
        },
        // 点击添加
        onAdd() {
            this.show = 1;
            this.goload();
        },
        // 点击修改
        onEdit(index) {
            this.goload();
            this.show = 2;
            this.ename = this.list[index].name;
            this.ecounselor = this.list[index].counselor;
            this.ecounselorTelephone = this.list[index].counselorTelephone;
            this.eindex = index;
        },
        onClickLeft() {
            if (this.show == 0) {
                this.$router.back(1)
                // console.log("返回首页")
            } else {
                // 返回上一级
                this.back();
            }
        },
        onClickRight() {
            // 回到首页
            this.$router.back(1)
        },
    },
    computed: {
    },
    mounted() {
        this.getClassInfo();
        setTimeout(async () => {
            this.loadingStatus = false;
        }, 1000);



    },
}


</script>
<style>

</style>